
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <style>
		.icon-trace {background: url('../img/_0003_导出列表.png') no-repeat center center;}
		.icon-playback {background: url('../img/_0009_详细.png') no-repeat center center;}
		/*.icon-detail{background: url('../img/_0004_导出详细.png') no-repeat center center;}*/
	</style>
</head>
<body >	
      
	 <div style="width:1200px;height:450px">
        <table id="dg" class="easyui-datagrid" title="" style="width:1200px;height:250px"
        data-options="rownumbers:true,singleSelect:true,selectOnCheck:false,checkOnSelect:false,toolbar:toolbar">
		<thead>
			<tr>
				<th data-options="field:'licenseNumber',width:150">车牌号</th>
				<th data-options="field:'customer',width:150">客户名称</th>
				<th data-options="field:'ModelName',width:150">车型</th>
			    <th data-options="field:'d_esn',width:150,hidden:false">终端号</th>
				<th data-options="field:'totalFuelCharge',width:150,hidden:false">加油量</th>
				<th data-options="field:'totalFuelLoss',width:150,hidden:false">漏油量</th>
				<th data-options="field:'deviceID',width:0,hidden:true">deviceID</th>
			</tr>
		</thead>
	</table>
	 <table id="dg1" class="easyui-datagrid" title="详细清单" style="width:1200px;height:200px"
        data-options="rownumbers:true,singleSelect:true,selectOnCheck:false,checkOnSelect:false">
		<thead>
			<tr>
				<th data-options="field:'licenseNumber',width:200">车牌号</th>
				<th data-options="field:'gpsStamp',width:200">加漏油时间</th>
				<th data-options="field:'fuel_change',width:200">油量变化(%)</th>
			    <th data-options="field:'address_num',width:600,hidden:false">地址</th>
				<th data-options="field:'deviceID',width:0,hidden:true">deviceID</th>
			</tr>
		</thead>
	</table>
	</div>
	<div id="main" style="width:1200px;height:250px" ></div>

              
	<script type="text/javascript">
	var glob_rows;
	var toolbar = [{
		text:'excel导出',
		iconCls:'icon-trace',
		handler:function(){	
			  var url='../smarty/demo/fuelChange_excel.php?startDate='+glob_startDate+'&stopDate='+glob_stopDate+'&devices='+glob_deviceIDs;
		      //  alert(url);
		         window.open(url,"_blank");
			    }
				
	},{
		text:'详细',
		iconCls:'icon-playback',
		handler:function(){
		var selectRow=$('#dg').datagrid('getSelected');
		if(selectRow==null){
			alert("请单击车辆进行选择（最多1辆）！");
			return;
		}
//		alert(selectRow.deviceID);
		//getData(selectRow.deviceID,glob_startDate,glob_stopDate);
		 url='../service/tj_fuelChange.php?opType=2&startDate='+glob_startDate+'&stopDate='+glob_stopDate+'&devices='+selectRow.deviceID;
		 $('#dg1').datagrid({   
			 url:url
					 }
		 );
		
		 getData1(selectRow.deviceID,glob_startDate,glob_stopDate,selectRow.licenseNumber);

		}
	}
	];
	
	var  glob_startDate;
	var  glob_stopDate;
	var  glob_deviceIDs;
	 function dailySearch(deviceArr,startDate,stopDate){
		 glob_startDate=startDate;
		 glob_stopDate=stopDate;
		 deviceIDs=deviceArr.join(",");
		 glob_deviceIDs=deviceIDs;
		 url='../service/tj_fuelChange.php?opType=0&startDate='+startDate+'&stopDate='+stopDate+'&devices='+deviceIDs;
		 //alert(url);
		 $('#dg').datagrid({   
			 url:url
					 }
		 );
	  }
	 
	 
	 $('#dg').datagrid({
		 onLoadSuccess: function (data) {
			if (data.rows.length == 0) {
	
			 }
			 else {
			 $('#dg').datagrid("selectRow", 0);
			 var selectRow=$('#dg').datagrid('getSelected');
			 url='../service/tj_fuelChange.php?opType=2&startDate='+glob_startDate+'&stopDate='+glob_stopDate+'&devices='+selectRow.deviceID;
			 $('#dg1').datagrid({   
				 url:url
						 }
			 );
			 getData1(selectRow.deviceID,glob_startDate,glob_stopDate,selectRow.licenseNumber);
			 }
			 },
		 
			 onSelect: function(index,row){
				 var selectRow=row;
				url='../service/tj_fuelChange.php?opType=2&startDate='+glob_startDate+'&stopDate='+glob_stopDate+'&devices='+selectRow.deviceID;
				$('#dg1').datagrid({   
					 url:url
							 }
				 );
			 
			 getData1(selectRow.deviceID,glob_startDate,glob_stopDate,selectRow.licenseNumber);
			}
		 
		 });
	 
	  
     // 路径配置
 //     require.config({
 //             paths:{ 
 //                 'echarts' : 'http://echarts.baidu.com/build/echarts',
 //                 'echarts/chart/line' : 'http://echarts.baidu.com/build/echarts'
 //             }
 //         });
     
     
      function getData1(deviceID,startDate,stopDate,licenseNumber){
     // 	  alert(deviceID+" "+startDate+" "+stopDate);
      	  $.post("../service/tj_fuelChange.php",
        		  {
    		      devices:deviceID,startDate:startDate,stopDate:stopDate,opType:'3'
        		  },
          		  function(data,status){
          			 //  alert(data);
          			  var rows=eval(data);
          			  var x_data=rows[0];
          			  
          			  var y_data=rows[1];
          			  
          			 
          			  
          			  
          			  require.config({
          		            paths:{ 
          		                'echarts' : 'http://echarts.baidu.com/build/echarts',
          		                'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
          		            }
          		        });
          		        
          		        // 使用
          		        require(
          		            [
          		                'echarts',
          		                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
          		            ],
          		            function (ec) {
          		                // 基于准备好的dom，初始化echarts图表
          		                var myChart = ec.init(document.getElementById('main')); 
          		                
          		                var option = {
          		                	title : {
                                    	        text: '加漏油统计('+licenseNumber+')：',
                                    	        subtext: ''
                                    	    },
                                    	 tooltip : {
                                  	        trigger: 'axis'
                                  	    },
          		                    legend: {
          		                        data:['加漏油(%)']
          		                    },
          		                    xAxis : [
          		                        {
          		                            type : 'category',
          		                            data : x_data
          		                        }
          		                    ],
          		                    yAxis : [
          		                        {
          		                            type : 'value'
          		                        }
          		                    ],
          		                    series : [
          		                        {
          		                            "name":"加漏油(%)",
          		                            "type":"bar",
          		                            itemStyle: {
                                                  normal: {
                                                      borderWidth: 6,
                                                      borderRadius:0,
                                                      label : {
                                                          show: true, position: 'insideTop'
                                                      }
                                                  }
                                              },
          		                            "data":y_data
          		                        }
          		              
          		                    ]
          		                };
          		        
          		                // 为echarts对象加载数据 
          		                myChart.setOption(option); 
          		            }
          		        );
          			  
          			  
          			  
              
      	  
          		  });
          		  	  
      }
     
   
      function getData(deviceID,startDate,stopDate){
    	//  alert(deviceID+" "+startDate+" "+stopDate);
    	  $.post("../service/tj_fuelChange.php",
        		  {
    		      devices:deviceID,startDate:startDate,stopDate:stopDate,opType:'1'
        		  },
        		  function(data,status){
        			   //alert(data);
        			  var rows=eval(data);
        			  var x_data=rows[0];
        			  
        			  var y_data=rows[1];
        			  var y_data1=rows[2];
                      // 使用
                      require(
                          [
                              'echarts',
                              'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                          ],
                          function (ec) {
                              // 基于准备好的dom，初始化echarts图表
                              var myChart = ec.init(document.getElementById('main')); 
                              
                              option = {
                              	    title : {
                              	        text: '汽车加油按日统计',
                              	        subtext: ''
                              	    },
                              	    tooltip : {
                              	        trigger: 'axis'
                              	    },
                    //          	    legend: {
                    //          	        data:['每日里程']
                    //          	    },
                              	    toolbox: {
                              	        show : true
                              	    },
                              	    calculable : true,
                              	    xAxis : [
                              	        {
                              	            type : 'category',
                              	            boundaryGap : false,
                              	            data : x_data
                              	        }
                              	    ],
                              	    yAxis : [
                              	        {
                              	            type : 'value',
                              	            axisLabel : {
                              	                formatter: '{value} %'
                              	            }
                              	        }
                              	    ],
                              	    series : [
                              	        {
                              	            name:'当日加油',
                              	            type:'line',
                              	            data:y_data
                              	        }
                              	    ]
                              	};
                      
                              // 为echarts对象加载数据 
                              myChart.setOption(option); 
                          }
                      ); 
                      
                      
                      // 使用
                      require(
                          [
                              'echarts',
                              'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                          ],
                          function (ec) {
                              // 基于准备好的dom，初始化echarts图表
                              var myChart = ec.init(document.getElementById('main1')); 
                              
                              option = {
                              	    title : {
                              	        text: '汽车漏油按日统计：',
                              	        subtext: ''
                              	    },
                              	    tooltip : {
                              	        trigger: 'axis'
                              	    },
                    //          	    legend: {
                    //          	        data:['每日里程']
                    //          	    },
                              	    toolbox: {
                              	        show : true
                              	    },
                              	    calculable : true,
                              	    xAxis : [
                              	        {
                              	            type : 'category',
                              	            boundaryGap : false,
                              	            data : x_data
                              	        }
                              	    ],
                              	    yAxis : [
                              	        {
                              	            type : 'value',
                              	            axisLabel : {
                              	                formatter: '{value} %'
                              	            }
                              	        }
                              	    ],
                              	    series : [
                              	        {
                              	            name:'当日漏油',
                              	            type:'line',
                              	            data:y_data1
                              	        }
                              	    ]
                              	};
                      
                              // 为echarts对象加载数据 
                              myChart.setOption(option); 
                          }
                      ); 

    	  
        		  });
        		  	  
    }

      function test(){
    	  var deviceArray = new Array();
    	  deviceArray[0] = 'ACT610(w)9620';
    	  deviceArray[1] = '6C500CBD';
    	  dailySearch(deviceArray,"2014-07-15","2014-09-02");      
    	  
      }
	//test       
    $(document).ready(function(){
    //	test(); 
    });
      	  
	</script>
		</body>
</html>